let bannerRender = (function () {
    let container = document.querySelector('#container'),
        wrapper = container.querySelector('.wrapper'),
        focus = container.querySelector('.focus'),
        arrow = container.querySelectorAll('.arrow'),
        arrowLeft = container.querySelector('.left'),
        arrowRight = container.querySelector('.right'),
        slidelist = null, //4个null是设置dom元素
        focuslist = null,
        img = null,
        imgWidth = null;
    // 自动轮播图参数 step记录当前图片的索引，每2秒切换一张图片
    let step = 0,
        autoTimer = null,
        interval = 3000;
    // 1promise+ajax获取数据编写请求函数
    let queryData = function () {
        return new Promise((resolve, reject) => {
            // ajax异步请求代码
            let xhr = new XMLHttpRequest()
            xhr.open('GET', 'json/banner.json', true)
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let data = JSON.parse(xhr.responseText) //json格式的字符串
                    // 拿到请求到到数据供resolve函数使用 这就是回调函数
                    resolve(data)
                }
            }
            xhr.send(null)
        })
    }

    // 数据+html渲染页面结构
    let renderHtml = function (data) {
        // <div class="slide"><img src="img/1.jpg" alt=""></div>  <li class="active"></li>
        let slideStr = focusStr = ''
        data.forEach(({ img, desc } = {}, index) => { //直接在参数列表里面结构
            // let { img, desc } = element  //对象结构
            slideStr += `<div class="slide"><img src="${img}" alt="${desc}"></div>`
            focusStr += `<li class=${index == 0 ? 'active' : ""}></li>`
        })
        wrapper.innerHTML = slideStr
        focus.innerHTML = focusStr
        // 至此页面上已经有了slide>img结构和ul>li结构 需要获取img lidom元素了
        slidelist = wrapper.getElementsByClassName('slide')
        focuslist = focus.querySelectorAll('li')
        img = slidelist[0].getElementsByTagName('img')[0]
        imgWidth = utils.css(img, 'width')
        // css中container和wrapper宽度是自己设定的，需要动态获取宽度
        // let imgHeight = utils.css(img, 'height')高度获取不到是0

        utils.css(container, 'width', imgWidth)
        utils.css(wrapper, 'width', imgWidth * slidelist.length)

    }


    // autoMove自动轮播(图片+下面小圆点都自动轮播) 改变wrapper的定位left值。
    let autoMove = function () {
        step++
        //  边界判断
        if (step >= slidelist.length) {
            step = 0
            utils.css(wrapper, 'left', 0) //立刻回答第一张
        }
        animate(wrapper, { left: -step * imgWidth }, 250)
        changeFocus()
    }
    // 小圆点自动改变红色 互斥事件 图片索引1和step1都是表示选中第一张
    let changeFocus = function () {
        focuslist.forEach((element, index) => {
            // 首先全部清除样式active样式
            element.classList.remove('active')
            // 让当前的step和idnex相等的加样式
            index === step ? element.classList.add('active') : null

        })
    }

    // 鼠标放上去轮播图停止清除定时器，显示左右按钮；鼠标离图片，轮播图启动开启定时器，隐藏左右按钮
    let handleContainer = function () {
        container.onmouseenter = function () {
            clearInterval(autoTimer)
            arrow.forEach(element => utils.css(element, 'display', 'block'))
        }
        container.onmouseleave = function () {
            autoTimer = setInterval(autoMove, interval) //这是一个新的定时器，和之前那个定时器不同
            arrow.forEach(element => utils.css(element, 'display', 'none'))

        }
    }

    // 小圆点点击事件 给每个小圆点绑定点击事件获取到当前点击元素的索引 step = index
    let handleFocus = function () {
        focuslist.forEach((element, index) => {
            element.onclick = function () {
                step = index
                utils.css(wrapper, 'left', -step * imgWidth)
                changeFocus()
            }
        })
    }

    // 左右点击按钮实现切换
    let handleArrow = function () {
        // 右边的按钮 点击自动播放autoMove
        arrowRight.onclick = autoMove
        // 左边按钮
        arrowLeft.onclick = function () {
            step--
            // 边界判断
            if (step < 0) {
                step = slidelist.length-1
                utils.css(wrapper,'left',-step*imgWidth) //瞬间跳到最后一张
            }
            animate(wrapper, { left: -step * imgWidth }, 250)
            changeFocus()
        }
    }

    return {
        // 初始化函数
        init: function () {
            let promise = queryData() //成功获取到数据后，then1就是渲染数据
            promise.then((data) => {
                renderHtml(data) //渲染数据
            }).then(() => {
                autoTimer = setInterval(autoMove, interval) //自动轮播功能定时器异步代码
            }).then(() => {
                handleContainer() //鼠标移入停止轮播 移出开启轮播
                handleFocus() //点击小圆点 立即切换到这张图片
                handleArrow()
            })

        }
    }
})()
bannerRender.init() //执行初始化函数
